<template>
    <el-dialog title="添加" width="600px" class="icon-dialog" :visible.sync="show" @close="closeForm()" append-to-body>
        <el-form :size="size" ref="form" :model="form" :rules="rules" label-width="100px">
			<el-form-item label="应用类型" prop="app_type">
				<el-radio v-model="form.app_type" :label="2">api应用</el-radio>
				<el-radio v-model="form.app_type" :label="3">rpc应用</el-radio>
				<el-radio v-model="form.app_type" :label="4">消费队列</el-radio>
				<el-radio v-model="form.app_type" :label="5">websocket</el-radio>
				<el-radio v-model="form.app_type" :label="6">定时任务</el-radio>
			</el-form-item>
            <el-form-item label="应用名" prop="application_name">
                <el-input v-model="form.application_name" placeholder="请输入应用名称"  />
            </el-form-item>
            <el-form-item label="应用目录" prop="app_dir">
                <el-input v-model="form.app_dir" placeholder="请输入应用目录"/>
            </el-form-item>
			<el-form-item label="应用端口" prop="port">
				<el-input v-model="form.port" placeholder="请输入应用端口号"/>
			</el-form-item>
        	<el-form-item label="限流" prop="limit">
				<el-input v-model="form.limit" placeholder="请输入限流值，不限制则留空"/>
			</el-form-item>
			<el-row>
			<el-form-item label="默认装载功能" prop="expand">
				<el-checkbox-group v-model="form.expand">
					<el-checkbox key="0" label="mysql">mysql</el-checkbox>
					<el-checkbox key="1" label="mongodb">mongodb</el-checkbox>
					<el-checkbox key="2" label="redis">redis</el-checkbox>
					<el-checkbox key="3" label="es">es</el-checkbox>
					<el-checkbox key="4" label="jwt">jwt</el-checkbox>
					<el-checkbox key="5" label="beanstalkd">beanstalkd</el-checkbox>
					<el-checkbox key="6" label="rabbitmq">rabbitmq</el-checkbox>
					<el-checkbox key="7" label="kafka">kafka</el-checkbox>
					<el-checkbox key="8" label="oss">oss上传</el-checkbox>
					<el-checkbox key="13" label="aliSms">阿里云短信</el-checkbox>
				</el-checkbox-group>
			</el-form-item>
			<el-form-item v-if="form.app_type == 2" label="apipost项目ID" prop="project_id">
				<el-input v-model="form.project_id" clearable placeholder="请输入apipost项目ID"/>
			</el-form-item>
       </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button :size="size" :loading="loading" type="primary" @click="submit" >
                <span v-if="!loading">确 定</span>
                <span v-else>提 交 中...</span>
            </el-button>
            <el-button :size="size" @click="closeForm">取 消</el-button>
        </div>
    </el-dialog>
</template>

<script>
export default {
    props: {
		show: {
			type: Boolean,
			default: false
		},
		info: {
			type: Object,
			default: false
		}
	},
	data() {
		return {
			form: {
				application_name:'',
				app_dir:'',
				expand:[],
				app_type:2,
				domain:'',
				connect:'',
				project_id:'',
			},
			loading:false,
			tableList:[],
			connects:[],
            size:'small',
			rules: {
				application_name: [{ required: true, message: '请输入应用名', trigger: 'blur' }],
				app_dir: [{ required: true, message: '请输入应用目录名', trigger: 'blur' }],
				port: [{ required: true, message: '请设置应用端口号', trigger: 'blur' }],
			},
		}
	},
    watch: {
		show() {
			this.form = this.info
		}
	},
	methods: {
		submit(){
			this.$refs['form'].validate(valid => {
				if (valid) {
					this.loading = true
					this.$axios.post('/admin/Sys/Base/updateApplication',this.form).then(res => {
						if(res.data.status == 200){
							this.$message({message: '操作成功', type: 'success'})
							this.$emit('refesh_list')
							this.closeForm()
						}else{
							this.loading = false
							this.$message.error(res.data.msg)
						}
					}).catch(()=>{
						this.loading = false
					})
				}
			})
		},
		closeForm(){
		   this.$emit('update:show', false)
		   this.loading = false
		   if (this.$refs['form']!==undefined) {
				this.$refs['form'].resetFields();
		   }
		}
	},
}
</script>